<template>
	<view class="container">
		<view class="navgetar">
			<view class="cu-bar search">
				<view class="action">
					<text class="city">广州</text>
					<text class="usefull"></text>
				</view>
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="封阳台"
						confirm-type="search"></input>
				</view>
				<!-- <view class="cu-avatar round"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big11010.jpg">
				</view> -->
			</view>
			<view class="image">
				<image src="..https://img.aibbyp.com/wechat/images/banner.png" mode=""></image>
			</view>
		</view>
		<view class="main">
			<view class="nav">
				<view class="nav-icon" v-for="item in navArr" :key="item.name">
					<image :src="item.icon" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="emerging">
				<view class="left">
				</view>
				<view class="right">
					<view class="top"></view>
					<view class="button">
						<view></view>
						<view></view>
					</view>
				</view>
			</view>
		</view>
		<view class="classList">
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<!-- <view class="cu-item" :class="index==TabCur?'text-green cur':''" @tap="tabSelect" :data-id="0" >
					推荐
				</view> -->
				<view class="cu-item" :class="index==TabCur?'text-green cur':''"
					v-for="(item, index) in common.modulesData.categoryModules" :key="item.id" @tap="tabSelect"
					:data-id="index">
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
		<wanl-shop-page :windowHeight="windowHeight" :headHeight="headHeight"
			:pageModules="common.modulesData.homeModules" :adData="common.adData" />
	</view>
	</view>
</template>

<script>
	import wanlShopPage from '@/components/wanl-shop/page';
	import wanlShopFind from '@/components/wanl-shop/find';
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		components: {
			wanlShopPage,
			wanlShopFind,
		},
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				headHeight: 75,
				windowHeight: 10,
				headTop: 0,
				currentItemId: 'home',
				currentData: {},
				scrollLeft: 0,
				isModal: false,
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据了'
				},
				navArr: [{
					icon: '..https://img.aibbyp.com/wechat/images/login/mao.png',
					name: '找工会'
				}, {
					icon: '..https://img.aibbyp.com/wechat/images/login/mao',
					name: '找工匠'
				}, {
					icon: '..https://img.aibbyp.com/wechat/images/login/open.png',
					name: '找设计'
				}, {
					icon: '..https://img.aibbyp.com/wechat/images/login/serch.png',
					name: '找验收'
				}, ],
			};
		},
		onLoad(options) {
			if (options.reference) {
				uni.setStorageSync("wanlshop:reference", options.reference);
			}
		},

		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			// 动画
			animationFinish(e) {
				//#ifdef APP-PLUS
				this.changeCurrent(e);
				//#endif
			},
			// 滚动的tag
			changeCurrent(e) {
				this.currentItemId = e.detail.currentItemId;
				this.scrollLeft = (e.detail.current - 1) * 50;
			},
		},
		computed: {
			...mapState(['common', 'user', 'update'])
		},
		onShow() {
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(false);
			// #endif
			// 计算页面尺寸
			let sys = this.$wanlshop.wanlsys();
			this.headTop = sys.top;
			this.headHeight = sys.height + uni.upx2px(60);
			this.windowHeight = sys.windowHeight;
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: this.$store.state.common.modulesData.homeModules.page ?
						this.$store.state.common.modulesData.homeModules.page.style
						.navigationBarTextStyle : '',
					backgroundColor: this.$store.state.common.modulesData.homeModules.page ?
						this.$store.state.common.modulesData.homeModules.page.style
						.navigationBarBackgroundColor : ''
				});
			}, 200);
		},
	};
</script>

<style>
	.navgetar {
		width: 100%;
		height: 500rpx;
		background-color: #ff4630;

		.city {
			color: #fff;
		}

		.image {
			display: flex;
			justify-content: center;

			image {
				width: 94%;
				height: 360rpx;
			}
		}

		.usefull {
			width: 0;
			height: 0;
			border: 15rpx solid transparent;
			border-top: 15rpx solid #fff;
			margin-top: 24rpx;
			margin-left: 6rpx;
		}
		.cu-avatar round{
			margin-right: 20rpx;
		}
		.cuIcon-search {
			margin: 0 20rpx;
		}
	}
	.main {
		width: 100%;
		display: flex;
		justify-content: center;
		position: relative;

		.nav {
			width: 94%;
			height: 192rpx;
			border-radius: 12rpx 12rpx 0 0;
			position: absolute;
			z-index: 99999 !important;
			background-color: #fff;
			top: -110rpx;
			display: flex;
			justify-content: space-around;
			box-shadow: 1px 2px 10px 0px rgba(201, 201, 201, 0.3);

			.nav-icon {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
		.emerging {
			display: flex;
			justify-content: space-between;
			margin-top: 120rpx;
			width: 94%;

			.left {
				width: 269rpx;
				height: 355rpx;
				background-color: #fcf2b8;
				border-radius: 10px;
				margin-right: 20rpx;
				/* background-image: url(..https://img.aibbyp.com/wechat/images/login/组 731.png); */
				background-size: 100% 100%;
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-radius: 10px;
				.top {
					width: 460rpx;
					height: 164rpx;
					background-color: #ffecd0;
					border-radius: 10px;
					/* background-image: url('..https://img.aibbyp.com/wechat/images/login/koubei.png'); */ 
					background-size: 100% 100%;
				}

				.button {
					display: flex;
					justify-content: space-between;
					border-radius: 10px;

					view {
						width: 220rpx;
						height: 164rpx;
						background-color: #ffd4e4;
						border-radius: 10px;
						background-image: url(..https://img.aibbyp.com/wechat/images/login/组 734.png);
						background-size: 100% 100%;
					}
				}
			}
		}
	}

	.classList {
		margin-top: 20rpx;
	}
	.cu-bar search{
		width: 94%;
	}
	.goodsList {
		display: flex;
		width: 94%;
		flex-wrap: wrap;
		justify-content: space-between;

		.list {
			width: 40%;
			height: 500rpx;
			background-color: aqua;

			image {
				width: 200rpx;
				height: 300rpx;
			}
		}
	}

	.text-green {
		color: #ff4630;
	}
</style>